<template>
	<el-row :gutter="40">
		<el-col v-if="!form.id">
			<el-empty description="请选择左侧目录后操作" :image-size="100"></el-empty>
		</el-col>
		<template v-else>
			<el-col :lg="12">
				<h2>{{form.title || "新增目录"}}</h2>
				<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px" label-position="left">
					<el-form-item label="目录名称" prop="title">
						<el-input v-model="form.title" clearable placeholder="目录名称"></el-input>
					</el-form-item>
					<el-form-item label="上级部门" prop="parentId">
						<el-cascader v-model="form.parentId" :options="calOptions" :props="calProps" :show-all-levels="false" placeholder="顶级目录" clearable disabled></el-cascader>
					</el-form-item>
					<el-form-item label="目录路径" prop="dir">
						<el-input v-model="form.dir" clearable placeholder="目录路径"></el-input>
					</el-form-item>
					<el-form-item label="排序" prop="sortOrder">
						<el-input-number v-model="form.sortOrder" :min="0" :max="100" :precision="2" :step="1"   />
					</el-form-item>
					<el-form-item label="是否启用" prop="status">
						<el-switch v-model="form.status" inline-prompt active-text="是" inactive-text="否" :active-value="0" :inactive-value="-1">
						</el-switch>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="save" :loading="loading" v-auth="'file.catalogue.edit'">保 存</el-button>
					</el-form-item>
				</el-form>

			</el-col>
		</template>
	</el-row>

</template>

<script>

	export default {
		props: {
			catalogue: { type: Object, default: () => {} },
		},
		data(){
			return {
				form: {
					id: "",
					parentId: null,
					title: "",
					dir: "",
					status:0,
					sortOrder:0.0
				},
				calOptions: [],
				calProps: {
					value: 'id',
					label: 'title',
					checkStrictly: true
				},
				rules: [],
				loading: false
			}
		},
		watch: {
			catalogue: {
				handler(){
					this.calOptions = this.treeToMap(this.catalogue)
				},
				deep: true
			}
		},
		mounted() {

		},
		methods: {
			//简单化菜单
			treeToMap(tree){
				const map = []
				tree.forEach(item => {
					var obj = {
						id: item.id,
						parentId: item.parentId,
						title: item.title,
						children: item.children&&item.children.length>0 ? this.treeToMap(item.children) : null
					}
					map.push(obj)
				})
				return map
			},
			//保存
			async save(){
				this.loading = true
				var res = await this.$API.file.catalogue.edit.post(this.form)
				this.loading = false
				if(res.success){
					this.$message.success("保存成功")
				}
			},
			//表单注入数据
			setData(data, pid){
				this.form = data
				this.form.parentId = pid
			}
		}
	}
</script>

<style scoped>
	h2 {font-size: 17px;color: #3c4a54;padding:0 0 30px 0;}
	[data-theme="dark"] h2 {color: #fff;}
</style>
